<template>
  <div>
    <scroll-to-fixed>
      <div v-if="hotList && hotList.length > 0" class="mb-48">
        <div class="header-title">
          <div class="point"></div>
          <p class="title">{{ $t('tas_popular_works') }}</p>
        </div>
        <div class="list">
          <mx-link
            v-for="(item, index) in hotList"
            :key="index"
            :to="`${NEWS_PAGE_PATH_MAP[item.newsType || item.news_type]}/${
              item.newsId || item.news_id
            }`"
            target="_blank"
            class="item cursor-pointer click"
          >
            <p class="item-title ov-2 mr-12">
              {{ item.title }}
            </p>
            <t-image
              class="cover img-cover"
              :class="{
                'vlog-cover': (item.news_type || item.newsType) == NEWS_TYPE.VLOG
              }"
              :src="(item.thumbs && item.thumbs[0]) || ''"
            />
            <icon v-if="(item.news_type || item.newsType) != NEWS_TYPE.ARTICLE" class="video-btn" size="24px" name="ic_play" />
          </mx-link>
        </div>
      </div>
      <div v-if="relatedList && relatedList.length > 0">
        <div class="header-title">
          <div class="point"></div>
          <p class="title">{{ $t('Best_recommend') }}</p>
        </div>
        <div class="list">
          <mx-link
            v-for="(item, index) in relatedList"
            :key="index"
            :to="`${NEWS_PAGE_PATH_MAP[item.newsType || item.news_type]}/${
              item.newsId || item.news_id
            }`"
            target="_blank"
            class="item cursor-pointer click"
          >
            <p class="item-title ov-2 mr-12">
              {{ item.title }}
            </p>
            <t-image
              class="cover img-cover"
              :class="{
                'vlog-cover':
                  (item.news_type || item.newsType) == NEWS_TYPE.VLOG
              }"
              :src="(item.thumbs && item.thumbs[0]) || ''"
            />
            <icon v-if="(item.news_type || item.newsType) != NEWS_TYPE.ARTICLE" class="video-btn" size="24px" name="ic_play" />
          </mx-link>
        </div>
      </div>
    </scroll-to-fixed>
  </div>
</template>

<script>
import { NEWS_TYPE, NEWS_PAGE_PATH_MAP } from '@/constants/index.js';
import ScrollToFixed from '@/components/ScrollToFixed.vue';

export default {
  components: {
    ScrollToFixed
  },

  props: {
    hotList: {
      type: Array,
      default: () => []
    },
    relatedList: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      NEWS_TYPE,
      NEWS_PAGE_PATH_MAP
    };
  }
};
</script>

<style lang="scss" scoped>
.header-title {
  height: 24px;
  display: flex;
  align-items: center;
  .point {
    width: 4px;
    height: 16px;
    margin: 0 8px 0 16px;
    background: #fa4646;
    border-radius: 2px;
  }
}
.item {
  width: 344px;
  height: 78px;
  background: rgba(12, 12, 28, 0);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  position: relative;

  .item-title {
    flex: 1;
    font-size: 16px;
    color: #0c0c1c;
    line-height: 22px;
    font-weight: 500;
  }

  .cover {
    width: 96px;
    height: 54px;
    border: 0.5px solid rgba(42, 60, 88, 0.1);
    border-radius: 8px;
  }

  .vlog-cover {
    width: 96px;
    height: 54px;
    padding: 0 28px;
    background: #000;
    border-radius: 8px;
  }

  .video-btn {
    position: absolute;
    top: 27px;
    right: 52px;
  }
}
</style>
